<template>
	<div id="">
		<div class="header">
			<div class="head-top">
				<mt-header title="视频">
					<router-link to="/home" slot="left">
						<mt-button icon="back"></mt-button>
					</router-link>
				</mt-header>
			</div>
			<mt-navbar class="home-nav" v-model='active'>
				<mt-tab-item class='nav-title' @click.native="changeId(item.columnId)" :id="'book'+item.columnId" v-for="(item,index) in navList" :key="index">{{item.columnName}}</mt-tab-item>
			</mt-navbar>
		</div>

		<div class="main">
			<mt-tab-container v-model="active" swipeable>
				<mt-tab-container-item :id="'book'+item.columnId" v-for="(item,index) in navList" :key="index">
					<!-- {{item.columnName}} -->
					<div class="main1">
						<div class="novel-content" @click="goToBook(items)" v-for="(items,index) in datalist" :key="index">
							<span class="main-img-box">
                <img v-if="items.columnId == 36" src="../../../static/imgs/default_health_icon.jpg" alt="" width="100px" height="140px" />
                <img v-else-if="items.columnId == 41" src="../../../static/imgs/default_beauty_icon.jpg" alt="" width="100px" height="140px" />
                <img v-else-if="items.columnId == 39" src="../../../static/imgs/default_boom_icon.jpg" alt="" width="100px" height="140px" />
                <img v-else-if="items.columnId == 40" src="../../../static/imgs/default_funny_icon.jpg" alt="" width="100px" height="140px" />
                <img v-else-if="items.columnId == 43" src="../../../static/imgs/default_why_icon.jpg" alt="" width="100px" height="140px" />
              </span>
							<div class="booksname" v-html="items.columnName">123</div>
						</div>
					</div>
				</mt-tab-container-item>
			</mt-tab-container>
		</div>
	</div>
</template>
<script>
import api from "../../api/api.js";
import { Indicator } from "mint-ui";
export default {
  data() {
    return {
      active: "book35",
      navList: [],
      datalist: [],
      activeNo: ""
    };
  },
  mounted() {
    this.getList();
  },
  created() {
    this.datevalue = this.formatDate(new Date().getTime()); //时间
    this.columnId = localStorage.getItem("swipeableId")||"book35";
    this.active = localStorage.getItem("booktypeid");
    this.getListContent(this.active);   
  },
  watch: {
    active(curVal, oldVal) {
      localStorage.booktypeid = curVal;
      this.getListContent(curVal);
    }
  },
  methods: {
    goToBook(e) {
		console.log(e);
		this.$router.push({
			name:"videolist",
    })
    localStorage.setItem("videoTypeId",e.columnId)
    localStorage.setItem("videoTypeName",e.columnName)
	},
    changeId(id) {
      this.getListContent(id);
    },
    //内容
    getListContent(id) {
      var reg = /[a-zA-Z]/g;
      if (id) {
        id = this.active.replace(reg, "");
        // console.log(id);
      }
      const userid = localStorage.getItem("userid");
      const accid = localStorage.getItem("accid");
      this.datalist = [];
      this.$http({
        method: "post",
        url: api.baseURL + "getColumnNameByFColumnId",
        params: {
          inParam: {
            time: this.datevalue,
            sysCode: "FH_PUBOPE",
            columnId: id,
            userId: userid,
            terminalType: 1,
            accid: accid,
            currentPage: 1,
            pageSize: 10
          }
        }
      })
        .then(response => {
          // console.log(response.data.data);
          this.datalist = response.data.data;
        })
        .catch(error => {
          console.log(error);
        });
    },
    //获取图书列表
    getList() {
      Indicator.open();
      const userid = localStorage.getItem("userid");
      const accid = localStorage.getItem("accid");
      this.$http({
        method: "post",
        url: api.baseURL + "getColumnNameByFColumnId",
        params: {
          inParam: {
            time: this.datevalue,
            sysCode: "FH_PUBOPE",
            columnId: this.columnId,
            userId: userid,
            terminalType: 1,
            accid: accid
          }
        }
      })
        .then(response => {
          let firstList = response.data.data;
          this.navList = response.data.data;
          console.log(this.navList);
          Indicator.close();
        })
        .catch(error => {
          console.log(error);
          Indicator.close();
        });
    }
  }
};
</script>

<style scoped>
.mint-navbar .mint-tab-item.is-selected {
  border-bottom: 1px solid #e60012;
  color: #e60012;
}
.header {
  box-sizing: border-box;
}

.home-nav {
  max-width: 768px;
  overflow-x: auto;
}

.nav-title {
  white-space: nowrap;
  margin-left: 15px;
}
.nav-title:last-child {
  margin-right: 15px;
}
.nav-title .lastnav {
  padding-right: 15px;
}
/*navbar-swper滑动颜色*/

.home-nav {
  margin-bottom: 20px;
  border-bottom: 1px solid #fafafa;
}

.main1 {
  width: 92%;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  flex-wrap: wrap;

  /*background: sandybrown;*/
}
.main-img-box{
}
.main-img-box>img{
  height: 100px;
  width: 100px;
  border-radius: 10px
}
.main1::after {
  content: "";
  width: 100px;
}
.main1 .novel {
  margin-bottom: 24px;
  width: 100px;
  /*background: skyblue;*/
}

.novel-content {
  width: 100px;
  height: 100%;
  border-radius: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.main1 .booksname {
  /* margin-top: 10px; */
  word-wrap: break-word;
  word-break: normal;
  font-size: 14px;
  color: #252525;
}
</style>